<template>
  <div class="overallTrend clearfix">
    <div class="logoBg"><img src="~@/assets/images/common/fiveG.png"></div>
    <div class="heading">收入分析：<span class="redTitle">核心平台收入整体趋势——环比{{topicDesc}}</span></div>
    <div class="content">


      <div class="desc">
        <div class="growthRate">
          <div class="weightFont"><span class="lingxing"></span>{{date}}，<span class="redFont">{{incomeResult}}</span><span
              class="normalFont">{{incomeResult1}}</span></div>
          <div class="weightFont"><span class="lingxing"></span>{{date}}，<span class="redFont">{{newIncream}}</span><span
              class="normalFont">{{lastContent}}</span></div>
        </div>
      </div>
      <div class="echartBox">
        <div class="rightEchart">
          <div class="contentTitle">{{mainDataTopic}}</div>
          <principalNumber :principal='principal'></principalNumber>
        </div>
        <!-- <div class="rightEchart">
                  <div class="contentTitle">基本面及ICT(含IDC)收入月走势</div>
                  <itcIncome :itcIncomeData='incomeBasicAndICTList'></itcIncome>
             </div> -->
      </div>

      <div class="tableBox">
        <el-table border stripe style="width: 100%" class="tableTh28" ref="table" :data='tableData' :span-method="arraySpanMethod">
          <el-table-column label="" prop="className" min-width="70"></el-table-column>
          <el-table-column v-for="(item,index) in colList" :label="item" :prop="'totalData'+index" :key="index"
            min-width="55">
            <template slot-scope="scope">
                     <span v-if="scope.row['totalData'+index]>0"  style="color:#5585bf">{{scope.row['totalData'+index]}}</span>
                    <span v-else style="color: #c00000">{{scope.row['totalData'+index]}}</span>
             </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import principalNumber from "@/views/budget/showPdf/showEchart/principalNumber";

  import {
    $budgetAPI
  } from "@/api";
  import {
    getCookie
  } from "@/common/js/cookie"
  import {
    mergeTableRow,
    mergeSpan
  } from "@/utils/mixin";
  import {
    getSessionStorage
  } from "@/common/js/storage";
  export default {
    name: "overallTrend",
    components: {
      principalNumber,

    },
  props: ["areaId", "month"],
    data() {
      return {
         topicDesc:'',
         incomeResultDesc:'',
         incomeResult1:'',
         lastContent:'',
        incomeResult: '',
        totalIncome: '',
        newIncream: '',
        decreamNumber: '',
        principal: {},
        colList: [],
        tableData: [],
        spanArr: [],
        date:'',
        mainDataTopic:'',
      }
    },

    methods: {
      getAllData() {
        $budgetAPI.getAllData({
            areaId:this.areaId,
            accMonth:this.month
          },
          res => {
            if (res && res.code == 0) {
              this.tableData=[]
              this.incomeResult = res.content.incomeResult
              this.topicDesc = res.content.topicDesc
              this.totalIncome = res.content.totalIncome
              this.mainDataTopic = res.content.mainDataTopic
              if(res.content.incomeResultDesc){
                this.incomeResult = res.content.incomeResultDesc.split(',')[0] + ','
                this.incomeResult1 = res.content.incomeResultDesc.split(',')[1]
              }
              let newIncreaseResult = res.content.newIncreaseResult
              if(newIncreaseResult){
                this.newIncream = newIncreaseResult.split(',')[0] + ','
                this.lastContent = newIncreaseResult.split(',')[1]+','+newIncreaseResult.split(',')[2]
              }
              let obj = {
                xAxis: [],
                y0Axis: [],
                yAxis: [],
                y1Axis: [],
                y2Axis: [],

              };
              res.content.mainData.map((item, index) => {
                obj.xAxis[index] = item.accMonth
                obj.y0Axis[index] = item.socreDoubleData
                obj.yAxis[index] = item.socreData
                obj.y1Axis[index] = item.increseData
                obj.y2Axis[index] = item.totalData
              })
              this.principal = obj
              this.colList = res.content.timeArea
              let length = res.content.timeArea.length;
              this.date = this.moment(res.content.timeArea[length-1]).format("YYYY年MM月");
              let date0 = {
                className:'整体收入数(万元)'
              };
              let date1 = {
                className:'整体收入环比(万元)'
              };
              let date2 = {
                className:'季度平均(万元)'
              };
              let arr0 = [];
              let arr1 = [];
              let arr2 = [];
              res.content.mainData.map((item, index) => {
                arr0.push(item.totalData)
              })
              res.content.bottomData.map((item, index) => {
                item.totalData.map((ele, ind) => {
                  arr1.push(ele)
                  arr2.push(item.quarterlyAverage)
                })
              })
              for(let i = 0; i < arr0.length; i++){
                 date0['totalData' + i] = arr0[i]
              }
              for (let i = 0; i < arr1.length; i++) {
                date1['totalData' + i] = arr1[i].totalData
                date2['totalData' + i] = arr2[i]
              }
             this.tableData.push(date0)
             this.tableData.push(date1)
             this.tableData.push(date2)
            } else {
              this.alertError(res);
            }
            setTimeout(() => {
              this.$refs.table.doLayout();
            }, 500);
          },
          err => {}
        )
      },
      arraySpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (rowIndex == 2&&columnIndex > 0) {
          let position = 1;
          for (let i = 0; i < this.colList.length; i++) {
            if (row['totalData' + (i + 1)] == row['totalData' + i]) {
              position += 1
            } else {
              break;
            }
          }
          if((columnIndex+1)%3 ==0 ){
            return {
                  rowspan: 1,
                  colspan: position
                }
          }else{
            return {
                  rowspan: 1,
                  colspan: 0
                }
          }
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .overallTrend {
    padding: 20px;
    border: 1px solid #dee5f3;
    border-radius: 5px;
    margin-top: 20px;
    position: relative;

    .overallTrend.clearfix:after,
    .overallTrend.clearfix:before {
      content: "";
      display: table;
    }

    .overallTrend.clearfix:after {
      clear: both;
    }

    .overallTrend.clearfix {
      *zoom: 1;
    }

    .logoBg {
      position: absolute;
      right: 20px;
      top: 20px;
    }

    .heading {
      font-size: 22px;
      font-weight: 700;
      text-align: center;
      padding-bottom: 40px;

      .redTitle {
        color: #c00000
      }
    }

    .content {


      .desc {
        margin-bottom: 20px;

        .growthRate {}

        .budget {}

        .weightFont {
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 10px;

          .redFont {
            color: #c00000;
          }

          .normalFont {
            font-weight: normal;
            font-size: 16px;
          }

          .lingxing {
            width: 10px;
            height: 10px;
            background-color: #000000;
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            /* Internet Explorer */
            -moz-transform: rotate(45deg);
            /* Firefox */
            -webkit-transform: rotate(45deg);
            /* Safari 和 Chrome */
            -o-transform: rotate(45deg);
            /* Opera */
            margin-right: 7px;
            display: inline-block;
          }
        }

        .redTitle {
          color: #c00000;
          font-size: 18px;
          font-weight: 700;
          margin-top: 10px;
        }

        .normalFont {
          font-size: 16px;
        }

        .normalRedFont {
          font-size: 16px;
          color: #c00000;
        }

        .marg {
          margin-top: 20px;
        }

        .budget {
          margin-top: 20px;
        }
      }

      .echartBox {
        margin-bottom: 10px;
        .rightEchart {
          position: relative;
          display: inline-block;
          width: 100%;
          border: 1px solid #e5e5e5;
          border-radius: 10px;
          padding: 20px;
          height: 300px;
          &:before {
            content: "";
            position: absolute;
            left: 21%;
            top: -2px;
            width: 56%;
            height: 2px;
            background-color: #fff
          }

          .contentTitle {
            position: absolute;
            width: 56%;
            left: 50%;
            top: -14px;
            transform: translateX(-50%);
            font-size: 18px;
            font-weight: 700;
            text-align: center;
          }
        }
      }
      .tableBox {
        border-top: 1px solid #9abcf1;
        border-left: 1px solid #bfbfbf;
        border-right: 1px solid #bfbfbf;
        border-bottom: 1px solid #bfbfbf;
       /deep/ .cell{
          padding: 0 !important;
              -webkit-transform: scale(0.9);
              transform: scale(0.9);
              line-height: normal !important;
        }
        /deep/ .tableTh28 .el-table__header {
          .first-title.is-leaf {
            position: relative;
            border-right: 1px solid #d7e5fb !important;
            .cell {
              color: #d7e5fb;

            }
          }

          .second-title.is-leaf {
            overflow: visible;

            .cell {
              transform: translateX(-60%);
            }
          }
        }

        /deep/ .el-table tr:last-child td {
          color: #333;
          text-align: center;
          border-bottom: 1px solid transparent !important;
          border-right: 1px solid #bfbfbf !important;
        }
          /deep/ .el-table tbody td{
            background:rgb(255,255,204);
          }
      }
    }
  }
</style>
